<template>
  <div class="feature">
   <!-- <a href="http://act.mogujie.com/zzlx67">
      <img src="~assets/img/home/recommend_bg.jpg" alt="">
    </a> -->
    <div class="content">
      <div class="feature-item" v-for="(item,index) in features" :key="index">
        <a :href="item.link">
          <img :src="item.image" alt="">
          <div>{{item.title}}</div>
        </a>
      </div>
    </div>

    <div class="content">
      <div class="feature-item" v-for="(item,index) in featuresUp" :key="index">
        <a :href="item.link">
          <img :src="item.image" alt="">
          <div>{{item.title}}</div>
        </a>
      </div>
    </div>

  </div>
</template>

<script>
	export default {
    name: "FeatureView",
    data() {
      return {
        features: [
           {title:'女装大佬',link:'http://baidu.com', image:'https://s10.mogucdn.com/mlcdn/c45406/191021_10ba435l8ffa822hh22l1467c75d9_135x135.jpg_640x640.v1cAC.40.webp'},
           {title:'女鞋鞋皇',link:'http://baidu.com', image:'https://s10.mogucdn.com/mlcdn/c45406/201112_4kgic58fk7edcediic8b9jcgh641e_135x135.png_640x640.v1cAC.40.webp'},
           {title:'上衣上架',link:'http://baidu.com', image:'https://s10.mogucdn.com/mlcdn/c45406/201117_05a1b05j9aaf8d0a7idjgc7eih4lj_135x135.png_640x640.v1cAC.40.webp'},
           {title:'美妆/护肤',link:'http://baidu.com', image:'https://s10.mogucdn.com/mlcdn/c45406/201029_4k14cib854j11a7lc596l83cb82bc_135x135.jpg_640x640.v1cAC.40.webp'},
           {title:'流行上库',link:'http://baidu.com', image:'https://s10.mogucdn.com/mlcdn/c45406/201117_39bc5a51k7chc0769e955e1jk3hhf_135x135.png_640x640.v1cAC.40.webp'},

        ],
        featuresUp: [
           {title:'母婴/童装',link:'http://baidu.com', image:'https://s10.mogucdn.com/mlcdn/c45406/201118_1la308bhk1ig559ab9k6kig525kk2_135x135.png_640x640.v1cAC.40.webp'},
           {title:'石榴裙下',link:'http://baidu.com', image:'https://s10.mogucdn.com/mlcdn/c45406/201117_5gd071j7ddhcj5l26032l3be5f66k_135x135.png_640x640.v1cAC.40.webp'},
           {title:'男装男鞋',link:'http://baidu.com', image:'https://s10.mogucdn.com/mlcdn/c45406/201102_1a0684b435l73ihcie6lf9llbi2f1_135x135.jpg_640x640.v1cAC.40.webp'},
           {title:'整套包装',link:'http://baidu.com', image:'https://s10.mogucdn.com/mlcdn/c45406/201111_3c880lki3070fccaea27al4j2ae7g_135x135.jpg_640x640.v1cAC.40.webp'},
           {title:'化妆品多',link:'http://baidu.com', image:'https://s10.mogucdn.com/mlcdn/c45406/200327_1lejei1c2i9hg7c8c7aljjl0kijjb_135x135.jpg_640x640.v1cAC.40.webp'},
        ]
      }
    }
	}
</script>

<style scoped>
   /* .feature img {
    width: 100%;
  } */

  #title {
    height: 30px;
    border: 1px red solid;
    text-align: center;
    margin: 0;
    padding: 0;
    font-weight: 600;
  }
  .content {
    height: 78px;
    /* border: 1px rgb(0, 255, 0) solid; */
    margin: 0;
    padding: 0;
    display: flex;
    text-align: center;
    font-size: 12px;
    
  }
  .feature-item {
    flex: 1;
  }

  .feature-item img {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
  }

</style>
